<template>
  <!-- <div class="bing"  ref="piechart" style="background-color: #fff;">饼图</div> -->
  <div class="bing" style="width: 735px; " :color="['#2775c1']">
    <div style=" height: 40px;">
      <span class="jianbian" style=" width: 100%; line-height: 45px; padding-left: 30px; font-size: 24px;">品类销售占比</span>
    </div>
    <div style="width: 100%; height: 380px; " ref="piechart">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.getpiechart()
  },
  methods: {
    getpiechart() {
      const piechart = this.$refs.piechart
      const myChart = this.$echarts.init(piechart)
      const data = []; const data2 = []
      const trafficWay = [
        {
          name: '饮料',
          value: 60
        }, {
          name: '乳制品',
          value: 25
        }, {
          name: '零食',
          value: 17
        }, {
          name: '其他',
          value: 5
        }]
      const color = ['#5bfce8', '#ff7e00', '#23bd68', '#ffd600']
      for (let i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 8,
              shadowBlur: 20,
              borderRadius: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 5,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0

            }
          }
        })
        data2.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name
        },
        {
          value: 5,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              opacity: 0.2

            }
          }
        }
        )
      }

      let angle = 0// 角度，用来做简单的动画效果的
      const option = {
        // backgroundColor: '#061740',
        color: color,
        // 修改右边饮料东西大小
        legend: {
          right: '15%',
          top: '40%',
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 20,
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          { // 外线1
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 3,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                  startAngle: (0 + angle) * Math.PI / 180,
                  endAngle: (90 + angle) * Math.PI / 180
                },
                style: {
                  stroke: '#4EE9E6',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 内线1
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 3,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                  startAngle: (180 + angle) * Math.PI / 180,
                  endAngle: (270 + angle) * Math.PI / 180
                },
                style: {
                  stroke: '#4EE9E6',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 外线2
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 3,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                  startAngle: (270 + -angle) * Math.PI / 180,
                  endAngle: (40 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: '#4EE9E6',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 外线2
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 3,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                  startAngle: (90 + -angle) * Math.PI / 180,
                  endAngle: (220 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: '#4EE9E6',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 绿点1
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              const x0 = api.getWidth() / 3
              const y0 = api.getHeight() / 2
              const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65
              const point = getCirlPoint(x0, y0, r, (90 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#66FFFF', // 粉
                  fill: '#66FFFF'
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 绿点2
            // name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              const x0 = api.getWidth() / 3
              const y0 = api.getHeight() / 2
              const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65
              const point = getCirlPoint(x0, y0, r, (270 + -angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#66FFFF', // 粉
                  fill: '#66FFFF'
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 绿点3
            // name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              const x0 = api.getWidth() / 3
              const y0 = api.getHeight() / 2
              const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6
              const point = getCirlPoint(x0, y0, r, (90 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#66FFFF', // 粉
                  fill: '#66FFFF'
                },
                silent: true
              }
            },
            data: [0]
          },
          { // 绿点4
            // name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              const x0 = api.getWidth() / 3
              const y0 = api.getHeight() / 2
              const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6
              const point = getCirlPoint(x0, y0, r, (270 + angle))
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#66FFFF', // 粉
                  fill: '#66FFFF'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['98%', '95%'],
            hoverAnimation: false,
            center: ['33.33%', '50%'],
            top: 'center',
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: data
          },
          {
            type: 'pie',
            top: 'center',
            startAngle: 90,
            clockwise: false,
            center: ['33.33%', '50%'],
            legendHoverLink: false,
            hoverAnimation: false,
            radius: ['94%', '55%'],
            itemStyle: {
              opacity: 0.15
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: data2
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            center: ['33.33%', '50%'],
            radius: ['39%', '38%'],
            hoverAnimation: false,
            top: 'center',
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: data
          }
        ]
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        const x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        const y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
          x: x1,
          y: y1
        }
      }

      function draw() {
        angle = angle + 3
        myChart.setOption(option, true)
        // window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        // 用setInterval做动画感觉有问题
        draw()
      }, 100)

      // const backgroundColor = ''
      // const title = {
      //   // text: '网络/安全设备',
      //   textStyle: {
      //     color: '#fff',
      //     fontSize: 30
      //   },
      //   padding: 0,
      //   top: 35,
      //   left: 'center'
      // }
      // const legend = {
      //   // data，就是取得每个series里面的name属性。2324
      //   orient: 'vertical',
      //   icon: 'circle', // 图例形状
      //   padding: 0,
      //   bottom: 'center',
      //   right: 40,
      //   itemWidth: 14, // 小圆点宽度
      //   itemHeight: 14, // 小圆点高度
      //   itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
      //   textStyle: {
      //     fontSize: 14,
      //     color: '#ffffff'
      //   }
      // }
      // const tooltip = {
      //   show: true,
      //   formatter: '{b}:{d}%'
      // }
      // const color = ['#03acd1', '#04cab7', '#03c781', '#fce348', '#fc2d8a', '#0292fe']
      // const option = {
      //   backgroundColor,
      //   color,
      //   title,
      //   tooltip,
      //   legend,
      //   series: [
      //     {
      //       // name: '网络安全设备',
      //       type: 'pie',
      //       center: ['50%', '50%'], // 圆心的位置
      //       top: '2%', // 单单指的饼图距离上面的距离，top越大饼图越小
      //       left: '0%', // 单单指的饼图距离左面的距离，会改变饼图的大小
      //       radius: ['0%', '50%'], // 实心圆[内半径=0，外半径] 外半径越大，圆越大
      //       clockwise: true, // 顺时针排列
      //       startAngle: 90, // 起始角度 影响不大
      //       // roseType:"", // 实心圆 不能出现roseType这个属性
      //       label: {
      //         show: false, // false不显示饼图上的标签
      //         position: 'outside', // inside（在饼图上显示）,outside(默认就会出现引导线) center
      //         formatter: '{b}:{c}'
      //       },
      //       // 只有设置了label:show=ture;position=outside 设置labelLine才会有效
      //       labelLine: {
      //         show: false
      //         // show: true, // 显示引导线
      //         // length: 30, // 连接饼图第1段线条的长度 length length2 不写自适应
      //         // length2: 30, // 链接饼图第2段线条长度
      //         // smooth: false // 是否光滑连接线
      //       },
      //       itemStyle: {
      //         // 每个扇形的设置
      //         borderColor: 'rgba(0,0,0,.1)', // 扇形边框颜色
      //         borderWidth: 1 // 扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果

      //       },
      //       data: [
      //         { value: 1048, name: '饮料' },
      //         { value: 735, name: '乳制品' },
      //         { value: 580, name: '零食' },
      //         { value: 484, name: '其他' }
      //         // { value: 300, name: ' WAF' },
      //         // { value: 600, name: ' 堡垒机' }
      //       ].sort((a, b) => b.value - a.value), // 数组从大到小排序

      //       emphasis: {
      //         // 启用鼠标放上去放大效果，这个挺好的
      //         scale: true,
      //         scaleSize: 10,
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //     }
      //   ]
      option && myChart.setOption(option)
    }

  }
}

</script>

<style lang="less" scoped>
.bing {
  background-image: url(../../assets/地图背景图/边框.png);
    background-size: 100% 100%;
}

</style>
